<d-toast [value]="msgs"></d-toast>
<div class="mint">
  <form dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection" #userForm="dValidateRules"
    (dSubmit)="submitForm($event)">
    <div *ngFor="let formData of form; index as i">
      <div class="mintForm">
        <div class="triangle"></div>
        <div [ngClass]="i>0 ? 'cancel':'none' " (click)="cancel(i)"><span *ngIf='i>0'>✕</span></div>
        <d-form-item>
          <d-form-control>
            <div class="img-upload">
              <input type="file" [id]="get('file', i)" style="display: none" accept=".png,.jpg,.gif,.jpeg"
                (change)="fileChange($event, i, formData)" />
              <div [ngClass]="imgValid.invalid && imgValid.dirty? 'upload-item-invalid' : 'upload-item'"
                (click)="uploadFile(i)">
                <img [src]="formData.img" style="width: 100%; height: 100%" alt="" *ngIf="formData.img" />
                <span class="icon-op-add" *ngIf="!formData.img"></span>
                <div class="tipMessage" *ngIf="!formData.img">
                  要求：可上传jpeg，jpg，png或gif格式文件；请使用小于10M的图片。
                </div>
              </div>
            </div>
            <input dTextInput type="text" [name]="get('fileUrl', i)" style="display: none"
              [(ngModel)]="formData.fileUrl" [dValidateRules]="formRules.fileUrlRules" #imgValid="ngModel" />
          </d-form-control>
        </d-form-item>
        <div class="right">
          <div class="row1">
            <d-form-item>
              <d-form-label class="imgName" [required]="true"><span class="label">图片名称</span>
                <span class="ValidateMessage" *ngIf="
                      nameValid.invalid && nameValid.dirty
                    ">图片名称不能为空</span>
              </d-form-label>
              <d-form-control>
                <input dTextInput type="text" [name]="get('name', i)" id="name" [(ngModel)]="formData.name"
                  placeholder="请输入图片名称" #nameValid="ngModel" minlength="1" maxlength="64"
                  [dValidateRules]="formRules.nameRules" />
              </d-form-control>
            </d-form-item>
            <d-form-item>
              <d-form-label [required]="true"><span class="label">作者</span><span class="ValidateMessage" *ngIf="
                      authorValid.invalid && authorValid.dirty 
                    ">作者不能为空</span></d-form-label>
              <d-form-control>
                <input dTextInput type="text" [name]="get('author', i)" id="author" [(ngModel)]="formData.author"
                  #authorValid="ngModel" placeholder="请输入图片作者" [dValidateRules]="formRules.nameRules" />
              </d-form-control>
            </d-form-item>
          </div>
          <div class="row2">
            <d-form-item>
              <d-form-label [required]="true"><span class="label">集合种类</span><span class="ValidateMessage" *ngIf="
                      collectionIndexValid.invalid && collectionIndexValid.dirty
                    ">集合种类不能为空</span></d-form-label>
              <d-form-control>
                <d-select id="collectionIndex" [options]="options2" [filterKey]="'name'" [(ngModel)]="currentOption4"
                  [name]="get('collectionIndex', i)" [placeholder]="'请选择'" [disabled]="collectionDisabled"
                  [dValidateRules]="formRules.collectionIndexRules" #collectionIndexValid="ngModel"></d-select>
              </d-form-control>
            </d-form-item>
            <d-form-item>
              <d-form-label [required]="true"><span class="label">分类</span><span class="ValidateMessage" *ngIf="
                    categoryValid.invalid && categoryValid.dirty
                    ">分类不能为空</span></d-form-label>
              <d-form-control>
                <d-select id="category" [options]="options3" [filterKey]="'name'" [(ngModel)]="formData.category"
                  [name]="get('category', i)" [placeholder]="'请选择'" [dValidateRules]="formRules.categoryRules"
                  #categoryValid="ngModel"></d-select>
              </d-form-control>
            </d-form-item>
            <d-form-item>
              <d-form-label [required]="true"><span class="label">铸造个数</span><span class="ValidateMessage" *ngIf="
                    numberValid.invalid && numberValid.dirty && !Mintvalidator(formData)
                    ">请输入规范的铸造个数</span><span class="ValidateMessage" *ngIf="Mintvalidator(formData)">铸造个数不超过最大值</span>
              </d-form-label>
              <d-form-control>
                <input id="mintAmount" dTextInput type="number" [name]="get('mintAmount', i)" max="5000" min="1"
                  [(ngModel)]="formData.mintAmount" placeholder="请输入铸造个数（1到5000个）"
                  [dValidateRules]="formRules.mintAmountRules" #numberValid="ngModel" />
              </d-form-control>
            </d-form-item>
          </div>
          <div class="row3">
            <d-form-item>
              <d-form-label [required]="true"><span class="label">图片描述</span><span class="ValidateMessage" *ngIf="
                    descriptionValid.invalid && descriptionValid.dirty
                    ">图片描述不能为空</span></d-form-label>
              <d-form-control>
                <textarea dTextarea type="textarea" id="description" [name]="get('description', i)"
                  [(ngModel)]="formData.description" placeholder="请输入图片描述" [dValidateRules]="formRules.descriptionRules"
                  #descriptionValid="ngModel"></textarea>
              </d-form-control>
            </d-form-item>
          </div>
        </div>
      </div>
    </div>
    <button id="add-spacing" circled="true" (click)="add()">新增栏位</button>
    <d-form-operation>
      <d-button class="mr-element-spacing" [title]="userForm.errorMessage || ''" circled="true" id="mint-btn"
        [disabled]="collectionDisabled" dFormSubmit>点击铸造</d-button>
    </d-form-operation>
  </form>
</div>
